diff options
| author | Wolfgang Müller | 2024-03-05 18:08:09 +0100 |
|---|---|---|
| committer | Wolfgang Müller | 2024-03-05 19:25:59 +0100 |
| commit | d1d654ebac2d51e3841675faeb56480e440f622f (patch) | |
| tree | 56ef123c1a15a10dfd90836e4038e27efde950c6 /frontend/src/routes/archives/[id]/+page.svelte | |
| download | hircine-d1d654ebac2d51e3841675faeb56480e440f622f.tar.gz | |
Initial commit0.1.0
Diffstat (limited to 'frontend/src/routes/archives/[id]/+page.svelte')
| -rw-r--r-- | frontend/src/routes/archives/[id]/+page.svelte | 99 |
1 files changed, 99 insertions, 0 deletions
diff --git a/frontend/src/routes/archives/[id]/+page.svelte b/frontend/src/routes/archives/[id]/+page.svelte new file mode 100644 index 0000000..50a2940 --- /dev/null +++ b/frontend/src/routes/archives/[id]/+page.svelte @@ -0,0 +1,99 @@ +<script lang="ts"> + import { updateArchives } from '$gql/Mutations'; + import { archiveQuery } from '$gql/Queries'; + import { Direction, Layout, type FullArchiveFragment, type PageFragment } from '$gql/graphql'; + import { initReaderContext } from '$lib/Reader'; + import { initSelectionContext } from '$lib/Selection'; + import { setTabContext } from '$lib/Tabs'; + import { toastFinally } from '$lib/Toasts'; + import Guard from '$lib/components/Guard.svelte'; + import Head from '$lib/components/Head.svelte'; + import Titlebar from '$lib/components/Titlebar.svelte'; + import Grid from '$lib/containers/Grid.svelte'; + import Gallery from '$lib/gallery/Gallery.svelte'; + import PageView from '$lib/reader/PageView.svelte'; + import Reader from '$lib/reader/Reader.svelte'; + import ArchiveDelete from '$lib/tabs/ArchiveDelete.svelte'; + import ArchiveDetails from '$lib/tabs/ArchiveDetails.svelte'; + import ArchiveEdit from '$lib/tabs/ArchiveEdit.svelte'; + import Tab from '$lib/tabs/Tab.svelte'; + import Tabs from '$lib/tabs/Tabs.svelte'; + import { getContextClient } from '@urql/svelte'; + import type { PageData } from './$types'; + + export let data: PageData; + const client = getContextClient(); + const reader = initReaderContext(); + setTabContext({ + tabs: { + details: { title: 'Details' }, + edit: { title: 'Edit' }, + deletion: { title: 'Delete' } + }, + current: 'details' + }); + + $: result = archiveQuery(client, { id: data.id }); + + function updateCover(event: CustomEvent<number>) { + updateArchives(client, { ids: archive.id, input: { cover: { id: event.detail } } }).catch( + toastFinally + ); + } + + let archive: FullArchiveFragment; + + $: $result, update(); + function update() { + if (!$result.stale && $result.data?.archive.__typename === 'FullArchive') { + archive = structuredClone($result.data.archive); + + $reader.pages = archive.pages; + } + } + + const selection = initSelectionContext<PageFragment>('Page', (p) => p.path); + $selection.selectable = (p) => p.comicId === null; + + $: if (archive) { + $selection.view = archive.pages; + } +</script> + +<Head section="Archive" title={archive?.name} /> + +{#if archive} + <Grid> + <header> + <Titlebar title={archive.name} /> + </header> + + <aside> + <Tabs> + <Tab id="details"> + <ArchiveDetails {archive} /> + </Tab> + <Tab id="edit"> + <ArchiveEdit {archive} /> + </Tab> + <Tab id="deletion"> + <ArchiveDelete {archive} /> + </Tab> + </Tabs> + </aside> + + <main class="overflow-auto"> + <Gallery + pages={archive.pages} + on:open={(e) => ($reader = $reader.open(e.detail))} + on:cover={updateCover} + /> + </main> + </Grid> +{:else} + <Guard {result} /> +{/if} + +<Reader> + <PageView layout={Layout.Single} direction={Direction.LeftToRight} /> +</Reader> |